<template>
  <div>
    <el-button
      v-permissions="{ permission: ['add:GoodsGroup'] }"
      type="primary"
      @click="dialog = true"
    >
      新增类别
    </el-button>
    <el-table :data="tableData" style="margin-top: 10px">
      <el-table-column label="名称" prop="type_name" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            v-permissions="{ permission: ['edit:GoodsGroup'] }"
            type="primary"
            @click="edit(scope.row)"
          >
            编辑
          </el-button>
          <el-button
            v-permissions="{ permission: ['delete:GoodsGroup'] }"
            type="danger"
            @click="delCate(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog append-to-body :title="dialogTitle" :visible.sync="dialog">
      <div>
        <div class="flex_y_center" style="margin: 15px 0">
          <div style="width: 30%; text-align: right">所属分组：</div>
          <div>{{ $router.app._route.meta.title }}</div>
        </div>
        <!-- 类别名称 -->
        <div class="flex_y_center" style="margin: 15px 0">
          <div style="width: 30%; text-align: right">
            <span style="color: red">*</span>
            类别名称：
          </div>
          <el-input
            v-model="cateFrom.type_name"
            placeholder="请输入类别名称"
            style="width: 40%"
          />
        </div>
      </div>
      <div slot="footer">
        <el-button type="danger" @click="dialog = false">关闭</el-button>
        <el-button type="primary" @click="addMethod">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    methodTypeList,
    methodTypeAdd,
    methodTypeDel,
  } from '@/api/commodityType'

  export default {
    data() {
      return {
        tableData: [],

        dialogTitle: '',
        dialog: false,

        cateFrom: {
          id: '',
          type_code: window.location.pathname.substring(1),
          type_name: '',
        },
      }
    },
    watch: {
      // 监听对话框的打开关闭，如果关闭的话那么初始化提交数据对象
      dialog(newValue) {
        if (!newValue) {
          this.cateFrom.id = ''
          this.cateFrom.type_name = ''
        }
      },
    },
    mounted() {
      this.getMethodTypeList()
    },
    methods: {
      // 获取分组下的类别
      getMethodTypeList() {
        const data = {
          type_code: window.location.pathname.substring(1),
        }
        methodTypeList(data).then((res) => {
          this.tableData = res.data.data
        })
      },
      // 编辑类别
      edit(row) {
        this.dialogTitle = '编辑类别'
        this.cateFrom.id = row.id
        this.cateFrom.type_name = row.type_name
        this.dialog = true
      },
      // 删除类别
      delCate(row) {
        this.$confirm('确定要将 ' + row.type_name + ' 删除吗', '删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const data = {
            id: row.id,
          }
          methodTypeDel(data).then(() => {
            this.getMethodTypeList()
          })
        })
      },
      // 添加，编辑
      addMethod() {
        if (!this.cateFrom.type_name) this.$message.error('请输入类型名称')
        else {
          methodTypeAdd(this.cateFrom).then(() => {
            this.getMethodTypeList()
            this.dialog = false
          })
        }
      },
    },
  }
</script>

<style scoped></style>
